import React from 'react'
import { connect } from 'react-redux'
import { bindActionCreators, Dispatch } from "redux"
import { MyState, ArticleItem } from "../../type/router"
import * as actions from "../../store/modules/action"
import "./Xiang.css"

interface PROPS {
    xiangList: ArticleItem[]
}

export const XiangLb = (props: PROPS) => {
    return (
        <div className='main'>
            <div className="left">
                {props.xiangList.length ? props.xiangList.map((item, index) => {
                    return <div key={index}>
                        <img className='img' src={item.img} alt="" />
                        <div className='titlebox'>
                            <div className='titlebox1'>
                                <h1 className='h1'> <b>{item.title}</b> </h1>
                                <p className='p1'>发布时间：{item.time}&emsp;&emsp;点赞数量{item.zan}</p>
                            </div>
                        </div>
                        <div className='conbox'>
                            <h2><a id="title2"></a> <b>{item.title}</b> </h2>
                            <p className='word'> {item.con}</p>
                            <h2> <a id="title3" ></a> <b>{item.con}</b> </h2>
                            <p> {item.con}</p>
                            <h2><a id="title4" ></a> <b>{item.con}</b> </h2>
                            <p>{item.con}</p>
                        </div>
                    </div>
                }) : "暂无数据"}
            </div>
            <div className="rightdetail">
                {props.xiangList.length ? props.xiangList.map((item, index) => {
                    return <div key={index}>
                        <h1>目录</h1>
                        <h3>{item.title}</h3>
                    </div>
                }) : "无数据"}
            </div>
        </div>
    )
}

const mapStateToProps = (state: MyState) => ({
    xiangList: state.xiangList
})

const mapDispatchToProps = (dispatch: Dispatch) => {
    return bindActionCreators(actions, dispatch)
}

export default connect(mapStateToProps, mapDispatchToProps)(XiangLb)